<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<div class="rightpanel">
	<!-- Nav tabs -->
	<ul class="nav nav-tabs nav-justified">
		<li class="active"><a href="#rp-alluser" data-toggle="tab"><i class="fa fa-users"></i></a></li>
		<li><a href="#rp-favorites" data-toggle="tab"><i class="fa fa-heart"></i></a></li>
		<li><a href="#rp-history" data-toggle="tab"><i class="fa fa-clock-o"></i></a></li>
		<li><a href="#rp-settings" data-toggle="tab"><i class="fa fa-gear"></i></a></li>
	</ul>

	<!-- Tab panes -->
	<div class="tab-content">
		<div class="tab-pane active" id="rp-alluser">
			<h5 class="sidebartitle">Online Users</h5>
			<ul class="chatuserlist">
				<li class="online">
					<div class="media">
						<a href="#" class="pull-left media-thumb">
							<img alt="" src="${ctx}/static/images/photos/userprofile.png" class="media-object">
						</a>
						<div class="media-body">
							<strong>Eileen Sideways</strong> <small>Los Angeles, CA</small>
						</div>
					</div>
					<!-- media -->
				</li>
				<li class="online">
					<div class="media">
						<a href="#" class="pull-left media-thumb">
							<img alt="" src="${ctx}/static/images/photos/user1.png" class="media-object">
						</a>
						<div class="media-body">
							<span class="pull-right badge badge-danger">2</span> <strong>Zaham Sindilmaca</strong> <small>San Francisco, CA</small>
						</div>
					</div>
					<!-- media -->
				</li>
				<li class="online">
					<div class="media">
						<a href="#" class="pull-left media-thumb">
							<img alt="" src="${ctx}/static/images/photos/user2.png" class="media-object">
						</a>
						<div class="media-body">
							<strong>Nusja Nawancali</strong> <small>Bangkok, Thailand</small>
						</div>
					</div>
					<!-- media -->
				</li>
				<li class="online">
					<div class="media">
						<a href="#" class="pull-left media-thumb">
							<img alt="" src="${ctx}/static/images/photos/user3.png" class="media-object">
						</a>
						<div class="media-body">
							<strong>Renov Leongal</strong> <small>Cebu City, Philippines</small>
						</div>
					</div>
					<!-- media -->
				</li>
				<li class="online">
					<div class="media">
						<a href="#" class="pull-left media-thumb">
							<img alt="" src="${ctx}/static/images/photos/user4.png" class="media-object">
						</a>
						<div class="media-body">
							<strong>Weno Carasbong</strong> <small>Tokyo, Japan</small>
						</div>
					</div>
					<!-- media -->
				</li>
			</ul>

			<div class="mb30"></div>

			<h5 class="sidebartitle">Offline Users</h5>
			<ul class="chatuserlist">
				<li>
					<div class="media">
						<a href="#" class="pull-left media-thumb">
							<img alt="" src="${ctx}/static/images/photos/user5.png" class="media-object">
						</a>
						<div class="media-body">
							<strong>Eileen Sideways</strong> <small>Los Angeles, CA</small>
						</div>
					</div>
					<!-- media -->
				</li>
				<li>
					<div class="media">
						<a href="#" class="pull-left media-thumb">
							<img alt="" src="${ctx}/static/images/photos/user2.png" class="media-object">
						</a>
						<div class="media-body">
							<strong>Zaham Sindilmaca</strong> <small>San Francisco, CA</small>
						</div>
					</div>
					<!-- media -->
				</li>
				<li>
					<div class="media">
						<a href="#" class="pull-left media-thumb">
							<img alt="" src="${ctx}/static/images/photos/user3.png" class="media-object">
						</a>
						<div class="media-body">
							<strong>Nusja Nawancali</strong> <small>Bangkok, Thailand</small>
						</div>
					</div>
					<!-- media -->
				</li>
				<li>
					<div class="media">
						<a href="#" class="pull-left media-thumb">
							<img alt="" src="${ctx}/static/images/photos/user4.png" class="media-object">
						</a>
						<div class="media-body">
							<strong>Renov Leongal</strong> <small>Cebu City, Philippines</small>
						</div>
					</div>
					<!-- media -->
				</li>
				<li>
					<div class="media">
						<a href="#" class="pull-left media-thumb">
							<img alt="" src="${ctx}/static/images/photos/user5.png" class="media-object">
						</a>
						<div class="media-body">
							<strong>Weno Carasbong</strong> <small>Tokyo, Japan</small>
						</div>
					</div>
					<!-- media -->
				</li>
				<li>
					<div class="media">
						<a href="#" class="pull-left media-thumb">
							<img alt="" src="${ctx}/static/images/photos/user4.png" class="media-object">
						</a>
						<div class="media-body">
							<strong>Renov Leongal</strong> <small>Cebu City,
								Philippines</small>
						</div>
					</div>
					<!-- media -->
				</li>
				<li>
					<div class="media">
						<a href="#" class="pull-left media-thumb">
							<img alt="" src="${ctx}/static/images/photos/user5.png" class="media-object">
						</a>
						<div class="media-body">
							<strong>Weno Carasbong</strong> <small>Tokyo, Japan</small>
						</div>
					</div>
					<!-- media -->
				</li>
			</ul>
		</div>
		<div class="tab-pane" id="rp-favorites">
			<h5 class="sidebartitle">Favorites</h5>
			<ul class="chatuserlist">
				<li class="online">
					<div class="media">
						<a href="#" class="pull-left media-thumb">
							<img alt="" src="${ctx}/static/images/photos/user2.png" class="media-object">
						</a>
						<div class="media-body">
							<strong>Eileen Sideways</strong> <small>Los Angeles, CA</small>
						</div>
					</div>
					<!-- media -->
				</li>
				<li>
					<div class="media">
						<a href="#" class="pull-left media-thumb">
							<img alt="" src="${ctx}/static/images/photos/user1.png" class="media-object">
						</a>
						<div class="media-body">
							<strong>Zaham Sindilmaca</strong> <small>San Francisco, CA</small>
						</div>
					</div>
					<!-- media -->
				</li>
				<li>
					<div class="media">
						<a href="#" class="pull-left media-thumb">
							<img alt="" src="${ctx}/static/images/photos/user3.png" class="media-object">
						</a>
						<div class="media-body">
							<strong>Nusja Nawancali</strong> <small>Bangkok, Thailand</small>
						</div>
					</div>
					<!-- media -->
				</li>
				<li class="online">
					<div class="media">
						<a href="#" class="pull-left media-thumb">
							<img alt="" src="${ctx}/static/images/photos/user4.png" class="media-object">
						</a>
						<div class="media-body">
							<strong>Renov Leongal</strong> <small>Cebu City, Philippines</small>
						</div>
					</div>
					<!-- media -->
				</li>
				<li class="online">
					<div class="media">
						<a href="#" class="pull-left media-thumb">
							<img alt="" src="${ctx}/static/images/photos/user5.png" class="media-object">
						</a>
						<div class="media-body">
							<strong>Weno Carasbong</strong> <small>Tokyo, Japan</small>
						</div>
					</div>
					<!-- media -->
				</li>
			</ul>
		</div>
		<div class="tab-pane" id="rp-history">
			<h5 class="sidebartitle">History</h5>
			<ul class="chatuserlist">
				<li class="online">
					<div class="media">
						<a href="#" class="pull-left media-thumb">
							<img alt="" src="${ctx}/static/images/photos/user4.png" class="media-object">
						</a>
						<div class="media-body">
							<strong>Eileen Sideways</strong> <small>Hi hello, ctc?... would you mind if I go to your...</small>
						</div>
					</div>
					<!-- media -->
				</li>
				<li>
					<div class="media">
						<a href="#" class="pull-left media-thumb">
							<img alt="" src="${ctx}/static/images/photos/user2.png" class="media-object">
						</a>
						<div class="media-body">
							<strong>Zaham Sindilmaca</strong> <small>This is to inform you that your product that we...</small>
						</div>
					</div>
					<!-- media -->
				</li>
				<li>
					<div class="media">
						<a href="#" class="pull-left media-thumb">
							<img alt="" src="${ctx}/static/images/photos/user3.png" class="media-object">
						</a>
						<div class="media-body">
							<strong>Nusja Nawancali</strong> <small>Are you willing to have a long term relat...</small>
						</div>
					</div>
					<!-- media -->
				</li>
			</ul>
		</div>
		<div class="tab-pane pane-settings" id="rp-settings">

			<h5 class="sidebartitle mb20">Settings</h5>
			<div class="form-group">
				<label class="col-xs-8 control-label">Show Offline Users</label>
				<div class="col-xs-4 control-label">
					<div class="toggle toggle-success"></div>
				</div>
			</div>

			<div class="form-group">
				<label class="col-xs-8 control-label">Enable History</label>
				<div class="col-xs-4 control-label">
					<div class="toggle toggle-success"></div>
				</div>
			</div>

			<div class="form-group">
				<label class="col-xs-8 control-label">Show Full Name</label>
				<div class="col-xs-4 control-label">
					<div class="toggle-chat1 toggle-success"></div>
				</div>
			</div>

			<div class="form-group">
				<label class="col-xs-8 control-label">Show Location</label>
				<div class="col-xs-4 control-label">
					<div class="toggle toggle-success"></div>
				</div>
			</div>

		</div>
		<!-- tab-pane -->

	</div>
	<!-- tab-content -->
</div>
<!-- rightpanel -->